<template>
  <div class="panos-image-warp">
    <div class="flex">
      <div class="item-u">
        <div class="images-item">
          <img src="/static/krpano/panos/51323101.tiles/u/l1/1/l1_u_1_1.jpg" alt="">
          <img src="/static/krpano/panos/51323101.tiles/u/l1/1/l1_u_1_2.jpg" alt="">
        </div>
        <div class="images-item">
          <img src="/static/krpano/panos/51323101.tiles/u/l1/2/l1_u_2_1.jpg" alt="">
          <img src="/static/krpano/panos/51323101.tiles/u/l1/2/l1_u_2_2.jpg" alt="">
        </div>
      </div>
      <div class="item-d">
        <div class="images-item">
          <img src="/static/krpano/panos/51323101.tiles/d/l1/1/l1_d_1_1.jpg" alt="">
          <img src="/static/krpano/panos/51323101.tiles/d/l1/1/l1_d_1_2.jpg" alt="">
        </div>
        <div class="images-item">
          <img src="/static/krpano/panos/51323101.tiles/d/l1/2/l1_d_2_1.jpg" alt="">
          <img src="/static/krpano/panos/51323101.tiles/d/l1/2/l1_d_2_2.jpg" alt="">
        </div>
      </div>
      <div class="item-b">
        <div class="images-item">
          <img src="/static/krpano/panos/51323101.tiles/b/l1/1/l1_b_1_1.jpg" alt="">
          <img src="/static/krpano/panos/51323101.tiles/b/l1/1/l1_b_1_2.jpg" alt="">
        </div>
        <div class="images-item">
          <img src="/static/krpano/panos/51323101.tiles/b/l1/2/l1_b_2_1.jpg" alt="">
          <img src="/static/krpano/panos/51323101.tiles/b/l1/2/l1_b_2_2.jpg" alt="">
        </div>
      </div>
      <div class="item-l">
        <div class="images-item">
          <img src="/static/krpano/panos/51323101.tiles/l/l1/1/l1_l_1_1.jpg" alt="">
          <img src="/static/krpano/panos/51323101.tiles/l/l1/1/l1_l_1_2.jpg" alt="">
        </div>
        <div class="images-item">
          <img src="/static/krpano/panos/51323101.tiles/l/l1/2/l1_l_2_1.jpg" alt="">
          <img src="/static/krpano/panos/51323101.tiles/l/l1/2/l1_l_2_2.jpg" alt="">
        </div>
      </div>
      <div class="item-f">
        <div class="images-item">
          <img src="/static/krpano/panos/51323101.tiles/f/l1/1/l1_f_1_1.jpg" alt="">
          <img src="/static/krpano/panos/51323101.tiles/f/l1/1/l1_f_1_2.jpg" alt="">
        </div>
        <div class="images-item">
          <img src="/static/krpano/panos/51323101.tiles/f/l1/2/l1_f_2_1.jpg" alt="">
          <img src="/static/krpano/panos/51323101.tiles/f/l1/2/l1_f_2_2.jpg" alt="">
        </div>
      </div>
      <div class="item-r">
        <div class="images-item">
          <img src="/static/krpano/panos/51323101.tiles/r/l1/1/l1_r_1_1.jpg" alt="">
          <img src="/static/krpano/panos/51323101.tiles/r/l1/1/l1_r_1_2.jpg" alt="">
        </div>
        <div class="images-item">
          <img src="/static/krpano/panos/51323101.tiles/r/l1/2/l1_r_2_1.jpg" alt="">
          <img src="/static/krpano/panos/51323101.tiles/r/l1/2/l1_r_2_2.jpg" alt="">
        </div>
      </div>
    </div>

    <div class="flex">

    </div>
  </div>
</template>

<script>
export default {
  name: "panos-image"
}
</script>

<style scoped lang="scss">
  .panos-image-warp {
    height: 100%;
    overflow: auto;
  }

  .images-item {
    img {
      height: 100px;
      vertical-align: middle;
    }
  }
</style>
